<template>
  <div v-if="flowType === '3009'" class="card-detail"> 
    <!-- 专家 -->
    <ExpertInfo :canRecall="canRecall" :approveRecord="approveRecord"/>
  </div>

  <div v-else-if="flowType === '2027'" class="card-detail">
    <!-- 经费 -->
    <FundsInfo :canRecall="canRecall" :approveRecord="approveRecord"/>
  </div>

  <div v-else-if="flowType === '2029'" class="card-detail">
    <!-- 科研人才 -->
    <ScientificInfo :canRecall="canRecall" :approveRecord="approveRecord"/>
  </div>

  <div class="card-detail" v-else>
    <ProjectInfo :canRecall="canRecall" :approveRecord="approveRecord"/>
  </div>
</template>

<script lang="ts" setup>
  import {ref } from "vue";
  import {useRoute } from "vue-router";
  import ExpertInfo from "./components/expert/index.vue";
  import FundsInfo from "./components/funds/index.vue";
  import ScientificInfo from "./components/scientific/index.vue";
  import ProjectInfo from "./components/project/index.vue";
  import {queryCanRecall,flowNotifyRead} from "/@/api/approval";
  import {getApproveHistory} from "/@/api/project";
  import { storageLocal } from "/@/utils/storage";
  import NotifMessage from "/@/utils/message/notification";
  const route = useRoute();
  const flowType = route.query.flowType;
  const flowId = route.query.flowId;
  const instanceId = route.query.instanceId;
  const readId = route.query.readId;
  const mode = route.query.mode;
  const approveRecord = ref([])
  const canRecall = ref<boolean>(null);
  //后评价审批时更新项目状态
  const getFlowCanRecall = async (flowId) => {
    try {
      const { code,data } = await queryCanRecall({flowId:flowId});
      if (code === 200) {
        canRecall.value = data.canRecall;
      }
    } catch (err) {
      return true;
    }
  };

  //待阅变为已阅
  const setFlowNotifyRead = async (taskId) => {
    const userId = storageLocal.getItem("rdms-info")?.userId;
    let params = {
      assignee:userId,
      taskId:taskId,
      instanceId,
      id:readId
    };
    try {
      const { code,message } = await flowNotifyRead(params);
      if (code === 200) {
        message && NotifMessage.success(message);
      }
    } catch (err) {
      return true;
    }
  };

  //查询流程审批记录
  const getApproveHistoryList = async () => {
    if (instanceId) {
      const { code, data } = await getApproveHistory(instanceId);
      if (code === 200) {
        approveRecord.value = data;
        const len = data.length
        const taskId = len && data[len-1]?.taskId;
        if(mode === "toread" && taskId){
          setFlowNotifyRead(taskId)
        }
      }
    }
  };

  // const getApprovalTaskId = async () => {
  //   if (instanceId) {
  //     const { code, data } = await getTaskId({instanceId:instanceId});
  //     if (code === 200) {
  //       const taskId = data.taskId;
  //       if(taskId){
  //         setFlowNotifyRead(taskId)
  //       }
  //     }
  //   }
  // };

  if(mode === "look" && flowId){//已办详情需要判断是否可以撤回流程
    getFlowCanRecall(flowId)
  }
  getApproveHistoryList()
</script>

<style lang="scss" scoped>
  .card-detail{
    :deep .el-card__header{
      padding:16px 20px;
    }
    :deep .el-card__body{
      padding:10px 20px;
      overflow-x: auto;
    }
    :deep .header-card{
      width: 100%;
      position: sticky;
      top:15px;
      background: #fff;
      z-index: 9;
      border-top: 0;
    }

    :deep .td-item {
      .el-descriptions__cell {
        padding-bottom: 8px;
      }
    }
  }
</style>
